/*
 * @Description:基础输入组建
 * @Author: tao.xie
 * @Date: 2019-03-21 16:29:20
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-05-10 16:36:36
 */
<template>
  <div class="input-wrapper flex-h flex-ve">
    <!-- 名称 -->
    <span>{{name}}</span>

    <!-- 右边的包裹层 -->
    <div
      class="flex-h flex-vc input-right-content-wrapper"
      :class="bindClass"
    >
      <!-- 具名插槽 -->
      <slot name="input">
        <!-- 输入框 -->
        <div class="flex1">
          <input
            class="input"
            ref="input"
            :type="inputtype"
            :placeholder="placeHolder"
            v-model="value"
            @input="fire()"
          />
        </div>
        <i
          class="icon iconfont icon-cancel-o delete-icon"
          v-if="showDeleteIcon"
          v-show="getValue()!=''"
          @click="clear"
        ></i>
      </slot>
      <!-- 输入框右边的匿名插槽 -->
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 输入名称
    name: {
      type: String,
      default: '',
      required: true
    },
    // 输入提示
    placeHolder: {
      type: String,
      default: '',
      required: true
    },
    // 输入框的类型，默认text
    inputtype: {
      type: String,
      default: 'text',
      required: false
    },
    // 是否需要底部的border，默认true
    border: {
      type: Boolean,
      default: true,
      required: false
    },
    // 切割长度，每多少个数字中间加一个空格
    split: {
      type: Number,
      defualt: 0,
      required: false
    },
    maxLength: {
      type: Number,
      default: -1,
      required: false
    },
    showDeleteIcon: {
      type: Boolean,
      default: true,
      required: false
    }
  },
  computed: {
    bindClass() {
      if (!this.border) {
        return ''
      } else {
        let newclass = 'xb_border_bottom '
        if (this.warnBorder) {
          newclass += 'rrr'
        } else {
          newclass += 'ccc'
        }
        return newclass
      }
    }
  },
  data() {
    return {
      value: '',
      warnBorder: false
    }
  },
  mounted() {
    if (this.maxLength !== -1) { this.$refs.input.maxLength = this.maxLength }
  },
  methods: {
    fire: function () {
      this.$emit('input', this.value.replace(/\s+/g, ''))
    },
    getValue: function () {
      return this.value.replace(/\s+/g, '')
    },
    clear: function () {
      this.value = ''
      this.$emit('input', this.value.replace(/\s+/g, ''))
    },
    changeToWarnBorder(warn) {
      console.log('warn:' + warn)
      this.warnBorder = warn
    }
  },

  watch: {
    value(newValue, oldValue) {
      if (this.split === 0) {
        this.value = newValue
      } else {
        let reg = new RegExp('(\\d{' + this.split + '})(?=\\d)', 'g')
        this.value = newValue.replace(/\s/g, '').replace(reg, '$1 ')
      }
    }
  }
}
</script>

<style scoped>
/* 大的包裹层 */
.input-wrapper {
  width: 750px;
  height: 120px;
}

/*名称*/
.input-wrapper > span:first-of-type {
  width: 200px;
  margin-left: 40px;
  font-size: 15px; /*no*/
  line-height: 20px; /*no*/
  color: #333;
  margin-bottom: 20px;
}
/*输入框*/
.input:first-of-type {
  color: #333;
  font-size: 15px; /*no*/
  line-height: 20px; /*no*/
  border: none;
  width: 100%;
}
/*输入框右边的包裹层*/
.input-right-content-wrapper {
  width: 470px;
  padding-bottom: 20px;
}

.delete-icon {
  color: #999;
}
</style>
